<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<title>微店查询</title>
		<link rel="stylesheet" href="assets/mui/css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<style type="text/css">
			.contain {
				width: 100%;
				height: 100%;
			}
			
			.shop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding: 0.2rem 0.2rem;
				box-sizing: border-box;
				background-color: white;
			}
			
			.shop div:first-child {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 50%;
				font-size: 0.32rem;
			}
			
			.shop div:first-child>span:first-child {
				width: 0.6rem;
				height: 0.6rem;
				display: inline-block;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 0.2rem;
			}
			
			.shop div:first-child span img {
				width: 100%;
			}
			
			.shop>#togo {
				width: 5%;
			}
		</style>
	</head>

	<body>
		<!--返回-->
		<div id="app">
			<div class="h-back"></div>
			<div class="mui-scroll-wrapper" style="margin-top: 1rem;">
				<div class="mui-scroll">
					<div class="contain">
						<div class="shop" v-for="(item,index) in list" :key="item.user_id" @click="userShopTo(item.user_uuid)">
							<div>
								<span>
								<img :src="item.user_img" />
								</span>
								<span>{{item.user_name}}</span>
							</div>
							<img id="togo" src="img/left.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-3.1.0.min.js"></script>
		<script src="assets/artTemplate/template-native.js"></script>
		<script src="js/remstyle.js"></script>
		<script src="common/js/common.js"></script>
		<script src="assets/mui/js/mui.min.js"></script>
		<script src="common/js/header.js"></script>
		<script src="js/vue.js"></script>
		<script>
			let vm = new Vue({
				el: '#app',
				data: {
					list: [],
					listContain: [],
					page: 1,
					key:''
				},
				mounted() {

					var that = this;
					that.searchGet();

					that.userShop();

					mui.init({
						pullRefresh: {
							container: '.mui-scroll-wrapper', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
							up: {
								callback: function() {
									that.page++;
									that.userShop();
									if(that.listContain.length) {
										this.endPullupToRefresh();
									} else {
										this.endPullupToRefresh(true);
									}
								}
							}
						}
					});
				},
				methods: {
					userShop() {
						var that = this;
						mui.ajax(window.address + '/user/searchMerchant', {
							data: {
								"page": that.page,
								"rows": 10,
								"user_name":that.key
							},
							dataType: 'json',
							type: 'get',
							success: function(data) {
								that.listContain = data.data;
								for(var i = 0; i < data.data.length; i++) {
									that.list.push(data.data[i]);
								}
								console.log(that.list);
							}
						})
					},

					userShopTo(id) {
						window.location.href = 'v-shop.html?business=' + id;
					},
					searchGet() {
						var nowSearchWord = decodeURI(getParam('key'));
						this.key=nowSearchWord;
						console.log(this.key, 888);
					}
				}
			});
		</script>
	</body>

</html>